<template>
  <el-row>
    <el-col :span="hasBtn ? 22 : 24">
      <el-input
        @keypress.enter.native="emitQuery"
        v-bind="$attrs"
        v-model="query"
      />
    </el-col>
    <!-- 传递进来的btn -->
    <el-col v-if="hasBtn" :span="2">
      <slot name="btn" :query="query" />
    </el-col>
  </el-row>
</template>

<script>
import { debounce } from '@/utils'
export default {
  name: 'GQuerySearch',
  data() {
    return {
      query: '',
    }
  },
  computed: {
    hasBtn() {
      return this.$scopedSlots.btn
    },
  },
  watch: {
    query(newV) {
      if (this.hasBtn)/* console.log("发生改变了，触发查询" ,newV) */return
      this.emitQuery()
    },
  },
  methods: {
    emitQuery: debounce(function () {
      this.$emit('setValue', this.query)
    }),
  },
}
</script>

<style scoped>
.el-row {
  margin-top: 6px;
  margin-bottom: 6px;
}
:deep(.el-button) {
  float: right;
  width: 95%;
}
</style>
